<template>
  <div id="container">
    <div class="title">
      <img src="./image/title.png" />
      <!-- <img class="dot" src="../image/table-dot.png" /> -->
      <span>{{ title }}</span>
      <div class="more" @click="_moreClick">
        更多
        <span class="triangle"></span>
      </div>
    </div>
    <a-table class="table" :columns="columns" :data-source="listData" :locale="tableLocale" :pagination="false">
    </a-table>
    <a-icon class="loading" width="4em" height="4em" type="loading" v-if="loading" />
    <div class="more-bg" v-if="showMore">
      <div class="more-table">
        <div class="title">
          告警动态数据
          <!-- <img src="./image/line.png"> -->
          <img src="./image/close.png" class="close" @click="showMore = false" />
        </div>
        <div class="total">
          当日预警数量<span
            >共<i> {{ moreData.total }} </i>条</span
          >
        </div>
        <a-table
          class="table"
          :columns="columns"
          :data-source="moreData.records"
          :locale="tableLocale"
          :pagination="paginationOption"
          :total="moreData.total"
          @change="moreChange"
        >
        </a-table>
        <a-icon class="more-loading" type="loading" v-if="moreLoading" />
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDictItemsFromCache } from '@/api/api'
import empty from './components/empty.vue'
import autoSize from '../../uitils/auto-font-size.js'
export default {
  components: {
    empty,
  },
  name: 'chart-pie',
  props: {
    title: String,
    shadow: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    moreData: {
      type: Object,
      default: () => {
        return {
          records: [],
          total: 0,
        }
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    moreLoading: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    paginationOption: function () {
      return {
        position: 'bottom',
        size: 'small',
        total: this.moreData.total,
        pageSize: 5,
        showTotal: (total) => {
          return `共${total}条记录`
        },
      }
    },
    id: function () {
      return `main-${Math.random()}`
    },
    listData: function () {
      return this.data.filter((item, index) => {
        return index < 3
      })
    },
  },
  data() {
    return {
      tableLocale: {
        emptyText: <empty />,
      },
      showMore: false,
      columns: [
        {
          title: '告警对象',
          dataIndex: 'alarmName',
          align: 'center',
          width: 100,
        },
        {
          title: '情报名称',
          dataIndex: 'infoName',
          align: 'center',
          ellipsis: true
          // width: 160,
          // customRender: (text) => {
          //   const length = this.showMore? 22:16
          //   return <j-ellipsis value={text} length={length} />
          // }
        },
        {
          title: '情报ID',
          dataIndex: 'id',
          align: 'center',
          width: 100,
        },
        {
          title: '数据来源',
          dataIndex: 'sourceType',
          align: 'center',
          width: 80,
        },
        {
          title: '告警类型',
          dataIndex: 'category',
          customRender: (text) => {
            return this.filterMultiDictText('alarmType', text)
          },
          align: 'center',
          width: 80,
        },
        {
          title: '告警时间',
          width: 140,
          dataIndex: 'alarmTime',
          align: 'center',
        },
      ],
      moreColumns: [
        {
          title: '告警对象',
          dataIndex: 'alarmName',
          align: 'center',
          width: 160,
        },
        {
          title: '情报名称',
          dataIndex: 'infoName',
          align: 'center',
          width: 100,
        },
        {
          title: '情报ID',
          dataIndex: 'id',
          align: 'center',
          width: 120,
        },
        {
          title: '数据来源',
          dataIndex: 'accessDomainName',
        },
        {
          title: '告警类型',
          dataIndex: 'accessDomainName1',
        },
        {
          title: '告警时间',
          width: 120,
          dataIndex: 'warningTime',
          align: 'center',
        },
      ]
    }
  },
  methods: {
    _replaceSpace(str) {
      return str.replace(' ', '\n')
    },
    _moreClick() {
      this.$emit('more-click')
      this.showMore = true
    },
    moreChange(pagination, filters, sorter, { currentDataSource }) {
      this.$emit('more-change', pagination.current)
    },
    // 获取字典值
    filterMultiDictText(dictCode, text) {
      if(!text) return
      let datas = getDictItemsFromCache(dictCode)
      return this.$filterDictText(datas, text)
    },
  },
}
</script>

<style lang="less" scoped>
* {
  opacity: unset !important;
}
@font-face {
  font-family: 'pang';
  src: url(../../font/PangMenZhengDaoBiaoTiTi-1.ttf);
}
@keyframes lineMove {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}
@keyframes dot {
  0% {
    left: 0;
  }
  100% {
    left: 2%;
  }
}

.close {
  animation: unset !important;
  height: unset !important;
}

#container {
  width: 100%;
  height: 30.4vh;
  display: flex;
  flex-flow: column;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, 0.2);
  padding: 0 21px 0 23px;
  position: relative;
  .loading {
    font-size: 40px;
    position: absolute;
    bottom: 50%;
    left: calc(50% - 20px);
  }

  font-family: 'microsoft yahei';
  ::v-deep .ant-spin-blur {
    opacity: unset;
    &::after {
      background: transparent;
      opacity: unset;
    }
  }

  ::v-deep .ant-table-content {
    height: 100%;
    display: flex;
    flex-flow: column;

    .ant-table-placeholder {
      // height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .title {
    font-family: pang;
    width: 100%;
    height: 4vh;
    margin: 0 auto;
    margin-top: 1.296vh;
    color: #fff;
    // background-image: url(image/title.png);
    background-size: 100% 100%;
    position: relative;
    .dot {
      width: 10px;
      height: 10px;
      position: absolute;
      left: 2%;
      top: -3px;
      animation: 2s dot 0s linear;
    }
    > img {
      width: 100%;
      height: 100%;
      animation: 2s lineMove 0s linear;
    }
    // display: flex;
    // justify-content: space-between;
    .more {
      position: absolute;
      right: 4.5vh;
      top: 1.2vh;
      cursor: pointer;
      font-size: 1.481vh;
      display: flex;
      align-items: center;
      .triangle {
        display: block;
        width: 0;
        height: 0;
        border-width: 5px 0 5px 5px;
        border-style: solid;
        border-color: transparent transparent transparent #fff; /*透明 透明 透明 黄*/
        position: absolute;
        top: 5px;
        left: 3.5vh;
      }
    }

    span {
      position: absolute;
      left: 40px;
      top: 0.7vh;
      font-size: 1.852vh;
    }
  }

  .table {
    width: 100%;
    flex: 1;
    ::v-deep .ant-spin-container {
      height: 100%;

      .ant-table {
        height: 100%;
      }
    }

    ::v-deep .ant-spin-nested-loading {
      height: 100%;
    }

    ::v-deep .ant-table-placeholder {
      background-color: transparent;
      border-bottom: 0;
    }

    ::v-deep .ant-empty-description {
      color: #fff;
    }

    ::v-deep .ant-table-thead {
      th {
        padding: 0 10px;
        font-size: 1.296vh;
        height: 4.63vh;
        color: #00cbff;
        white-space: nowrap;
        background-color: transparent;
        border-bottom: 0;
      }
    }

    ::v-deep .ant-table-tbody {
      .ant-table-row {
        &:nth-of-type(odd) {
          background-color: rgba(39, 104, 136, 0.2);
        }
      }

      td {
        height: 5.5555vh;
        background-color: transparent;
        border-bottom: 0;
        color: #fff;
        padding: 0 10px;
        font-size: 1.296vh;
      }
    }
  }

  .more-bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.8);

    .more-loading {
      font-size: 40px;
      position: absolute;
      bottom: 50%;
      left: calc(50% - 20px);
    }

    .more-table {
      display: flex;
      flex-flow: column;
      width: 138.7969vh;
      min-width: 1000px;
      height: 65.0925%;
      min-height: 455px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      margin-top: 100px;
      background-image: url(./image/more-bg.png);
      background-size: 100% 100%;
      padding: 6vh 3.4vw 9vh 3.4vw;

      .title {
        background-image: unset;
        height: auto;
        font-family: pang;
        font-size: 3.3333vh;
        margin-top: 3.3333vh;
        margin-bottom: -0.7593vh;
        display: flex;
        flex-flow: column;
        align-items: center;
        position: relative;

        .close {
          width: 32px;
          position: absolute;
          right: -2.5vw;
          top: -7vh;
          cursor: pointer;
        }

        img {
          width: 512px;
          margin-top: 2px;
        }
      }

      .total {
        color: #fff;
        margin-bottom: 1.75925vh;
        font-size: 1.296vh;
        span {
          margin-left: 20px;
        }

        i {
          font-style: normal;
          color: #ffcc00;
        }
      }

      .table {
        flex: 1;

        ::v-deep .ant-table-thead {
          th {
            padding: 0 10px;
            font-size: 1.296vh;
            height: 4.48vh;
            color: #00aeff;
            white-space: nowrap;
            background-color: transparent;
            border-bottom: 0;
          }
        }

        ::v-deep .ant-table-tbody {
          .ant-table-row {
            &:nth-of-type(odd) {
              background-color: rgba(39, 104, 136, 0.2);
            }
          }

          td {
            height: 5vh;
            background-color: transparent;
            border-bottom: 0;
            color: #fff;
            padding: 0 10px;
            font-size: 1.296vh;
          }
        }

        ::v-deep .ant-spin-nested-loading {
          height: 100%;
        }

        ::v-deep .ant-spin-container {
          height: 100%;
          display: flex;
          flex-flow: column;
          position: relative;

          .ant-table {
            flex: 1;

            .ant-empty {
              min-height: 400px;
              line-height: 400px;
            }
          }

          .ant-pagination {
            position: absolute;
            right: 0;
            bottom: 1.4814vh;
            display: flex;
            justify-content: flex-end;
            margin: 0 0.148vh;
            .ant-pagination-jump-next,
            .ant-pagination-jump-prev {
              width: 32px;
              min-width: unset;
              display: flex;
              flex-wrap: nowrap;
              .ant-pagination-item-link {
                border: 0;
                margin: 0;
                width: auto;
              }
              .ant-pagination-item-ellipsis {
                width: 32px;
                color: #fff;
                border: 0;
              }
            }

            .ant-pagination-total-text,
            .ant-pagination-item-link {
              color: #0de8fb;
            }

            .ant-pagination-item-link {
              border: 1px solid #0de8fb;
              margin: 0 10px;
              width: 2.222vh;
              height: 2.222vh;
              line-height: 2.222vh;
              border-radius: 0;
              // margin: 0 10px;
            }
            .ant-pagination-total-text {
              height: 2.222vh;
              line-height: 2.222vh;
              font-size: 1.29629vh;
            }

            .ant-pagination-item {
              border-radius: 0;
              width: 2.222vh;
              height: 2.222vh;
              line-height: 2.222vh;
              border: 1px solid #0de8fb;
              background-color: transparent;

              a {
                padding: 0;
                color: #00beff;
              }
            }

            .ant-pagination-item-active {
              background-color: #00beff;
              border-color: #00beff;

              a {
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
